<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>
<body>
    <!-- 
        理解：是将回调函数延迟在下一次dom更新之后调用
        vue是异步渲染的框架，数据更新之后，dom不会立刻渲染,$nextTick会在dom渲染之后被触发，用来获取最新的dom节点
        使用场景：
            - 在created生命周期里进行dom操作，那么就一定要使用nextTick
            - 在数据变化后要执行某个操作，而这个操作需要使用随数据变化而变化的dom结构时，这个操作就需要放到nextTick中
     -->
    <div id="app">
        <span ref="span">{{ message }}</span>
        <p>{{ message2 }}</p>
        <button @click="change">改变</button>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data(){
                return {
                    message:'zzzz',
                    message2:''
                }
            },
            methods:{
                change(){
                    this.message = 'hello world!';
                    console.log(this.$refs.span.innerHTML);//hello world!
                    this.message2 = this.$refs.span.innerHTML;//你会发现一个奇怪的事情，即使上面已经在控制台输出了hello world，但是message2却被赋值为了zzzz，也就是message更新前的值
                    // 这是因为vue是异步渲染的框架，数据更新之后，dom不会立刻渲染
                    // 如果你想避免这个问题，只有两种方法

                    // 使用定时器(不推荐)
                    // setTimeout(() => {
                    //     this.message2 = this.$refs.span.innerHTML;
                    // }, 100);

                    // 使用nextTick(推荐)
                    this.$nextTick(()=>{
                        this.message2 = this.$refs.span.innerHTML;
                    });
                }
            }
        });

    </script>
</body>
</html>